<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>角色管理</title>
<link rel="stylesheet" href="${ctx}/resources/layui/css/layui.css">
<link rel="stylesheet" href="${ctx}/resources/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="${ctx}/resources/layui_ext/dtree/font/dtreefont.css">
</head>
<body style="padding: 10px;">
	<!-- 搜索条件开始 -->
	<form class="layui-form" method="post" id="searchFrm" lay-filter="searchFrm">
		<div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">角色名称:</label>
		      <div class="layui-input-inline">
		        <input type="text" name="rolename" autocomplete="off" class="layui-input">
		      </div>
		      <label class="layui-form-label">角色描述:</label>
		      <div class="layui-input-inline">
		        <input type="text" name="roledesc" autocomplete="off" class="layui-input">
		      </div>
			  <label class="layui-form-label">是否可用:</label>
			  <div class="layui-input-inline">
			     <input type="radio" name="available" value="1" title="是">
			     <input type="radio" name="available" value="0" title="否">
			  </div>
		      <div class="layui-input-inline">
		      	<button type="button" class="layui-btn layui-icon layui-icon-search"
					lay-submit="" lay-filter="doSearch">查询</button>
				<button type="reset" class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
		      </div>
		    </div>
	   	</div> 
	</form>
	<!-- 搜索条件结束-->
	
	<!-- 数据表格开始 -->
	<table class="layui-hide" id="roleTable" lay-filter="roleTable"></table>
	<!-- 数据表格结束 -->
	<!-- 表格头部工具栏开始 -->
	<div style="display: none;" id="roleToolbar">
		<button type="button" class="layui-btn" lay-event="add">添加</button>
		<button type="button" class="layui-btn layui-btn-danger" lay-event="batchDelete">批量删除</button>
	</div>
	<!-- 表格头部工具栏结束 -->
	<!-- 表格行工具栏开始 -->
	<div style="display: none;" id="roleRowbar">
		<button type="button" class="layui-btn layui-btn-sm" lay-event="update">修改</button>
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-warm" 
			lay-event="selectRoleMenu">分配菜单</button>
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-danger" lay-event="delete">删除</button>
	</div>
	<!-- 表格行工具栏结束 -->
	
	<!-- 添加和修改弹出层开始 -->
	<div style="display: none;" id="addOrUpdateDiv">
		<form class="layui-form" method="post" lay-filter="dataFrm" id="dataFrm">
			<div class="layui-form-item" style="margin: 10px;">
				<!-- id，隐藏域，修改时使用 -->
				<input type="text" name="roleid" hidden="">
			    <div class="layui-block">
			      	<label class="layui-form-label">角色名称:</label>
			      	<div class="layui-input-block">
			        	<input type="text" name="rolename" placeholder="请输入角色名称" lay-verify="required" autocomplete="off" class="layui-input">
			    	</div>
			    </div>
			</div>
			<div class="layui-form-item" style="margin: 10px;">
			    <div class="layui-block">
			      	<label class="layui-form-label">角色描述:</label>
			      	<div class="layui-input-block">
			       		<input type="text" name="roledesc" placeholder="请输入跳转地址" autocomplete="off" class="layui-input">
			     	</div>
			    </div>
	   		</div> 
			<div class="layui-form-item" style="margin: 10px;">
				<label class="layui-form-label">是否可用:</label>
			    <div class="layui-input-block">
			      	<input type="radio" name="available" value="1" title="是" checked="">
			      	<input type="radio" name="available" value="0" title="否">
			    </div>
			</div>
			<div class="layui-form-item"  style="margin: 10px;text-align: right;" >
				<div class="layui-input-block">
					<button type="button" class="layui-btn layui-icon layui-icon-release"
						lay-submit="" lay-filter="doSubmit">保存</button>
					<button type="reset" class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 添加和修改弹出层结束 -->
	<!-- 分配角色菜单弹出层开始 -->
	<div style="display: none;" id="selectRoleMenuDiv">
		<div class="layui-block">
	      	<label class="layui-form-label">分配菜单:</label>
	            <div class="layui-input-block">
	                <ul id="menuTree" class="dtree" data-id="0"></ul>
	            </div>
	    </div>
	</div>
	<!-- 分配角色菜单弹出层结束 -->
	

<script src="${ctx}/resources/layui/layui.js"></script>
<script>
	var tableIns;
	layui.extend({
	    dtree: '${ctx}/resources/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
	  }).use(['layer','table','form','dtree'], function() {
		var $ = layui.$;
		var layer = layui.layer;
		var table = layui.table;
		var form = layui.form;
		var dtree = layui.dtree;
		//初始化角色数据表格
		tableIns = table.render({
			    elem: '#roleTable'					//渲染的目标对象
			    ,url:'${ctx}/role/roleList.action'	//数据接口
			    ,title: '角色数据表'						//数据导出时的标题
			    ,toolbar:"#roleToolbar"				//表头的工具条
			    ,height:"full-100"	
			    ,page: true			//是否启用分页
			    ,cols: [[			//列表数据
			      {type: 'checkbox', fixed: 'left'}
			      ,{field:'roleid', title:'id', align:"center"}
			      ,{field:'rolename', title:'角色名称', align:"center"}
			      ,{field:'roledesc', title:'角色描述', align:"center"}
			      ,{field:'available', title:'可用', align:"center",  templet:function(d){
			    	  return d.available=="1"?"<span style='color:green;'>是</span>":"<span style='color:red;'>否</span>";
			      }}
			      ,{fixed:'right', title:'操作', toolbar:"#roleRowbar", align:"center"}
			    ]]
			    ,done:function(res, curr, count){
                    //回调函数
                    //判断当前页码是否大于1
                    if(curr > 1 && res.data.length == 0){
                        //当前页码-1
                        var pageValue = curr - 1;
                        tableIns.reload({
                            page:{curr:pageValue}//修改页码
                        });
                    }
                }
			    
			  });
		//监听查询表单的提交
		form.on("submit(doSearch)",function(data){
			if(data.field.available == undefined){
				data.field.available = "";
			}
			tableIns.reload({
				where: data.field
				,page: {
				  curr: 1 //重新从第 1 页开始
				}
			});		
		})
		 
		//1. 监听头工具栏事件 
		table.on("toolbar(roleTable)",function(obj){
			switch (obj.event) {
			case "add":			
				openAddRole();
				break;
			case "batchDelete":
				batchDelete();
				break;
			}
		});
		//弹出层实例
		var mainIndex;
		//弹出层对应的提交url
		var url;
		//打开添加角色弹出层
		function openAddRole() {
			mainIndex = layer.open({
				type:1
				,title:"添加角色"
				,content:$("#addOrUpdateDiv")
				,area:['700px']
				,success:function(ayero, index){
					//清空表单数据 jquery对象转dom对象，有reset函数
					$("#dataFrm")[0].reset();
					url = "${ctx}/role/addRole.action";
				}
			});
		}
		
		//监听添加或修改角色弹出层的提交操作
		form.on("submit(doSubmit)",function(data){
			//序列化表单数据
			var params = $("#dataFrm").serialize();
			$.post(url, params, function(result){
				if(result.success){
					//刷新数据表格
					tableIns.reload();
				}
				//显示响应提示信息
				layer.msg(result.message);
				//关闭弹出层
				layer.close(mainIndex);
			});
			//阻止表单提交
			return false;
		});
		
	 	//5. 监听行工具栏事件
		table.on('tool(roleTable)', function(obj){
		  var data = obj.data; //获得当前行数据
		  switch (obj.event) {
			case 'update':
				openUpdateRole(data);
				break;
			case 'selectRoleMenu':
				openSelectRoleMenu(data);
				break;
			case 'delete':
				deleteRole(data);
				break;
			}
		});
	 	
	 	//批量删除角色
	 	function batchDelete(){
	 		//获取当前选中行
            var checkStatus = table.checkStatus('roleTable');
            //判断是否有选中行
            var length = checkStatus.data.length;
            if(length > 0){
                layer.confirm("确定要删除这 "+ length +" 条数据?",{icon:3,title:"提示"},function (index) {
                    var data = checkStatus.data;
                    var params = "";
                    $.each(data,function(i,item){
                    	if(i == 0){
                    		params += "ids="+item.roleid;
                    	}else {
                    		params += "&ids="+item.roleid;
                    	}
                    });
                    $.post("${ctx}/role/batchDeleteRole.action",params,function (result) {
                        if(result.success){
                            //刷新数据表格
                            tableIns.reload();
                        }
                        layer.msg(result.message);
                    });
                    //关闭提示框
                    layer.close(index);
                });
            }else {
                layer.msg("请选择要删除的行!");
            }
	 	}
	 	
		
		//打开修改角色弹出层
		function openUpdateRole(data) {
			mainIndex = layer.open({
				type:1
				,title:"修改角色"
				,content:$("#addOrUpdateDiv")
				,area:['700px']
				,success:function(ayero, index){
					//回显表单
					form.val('dataFrm',data);
					url = "${ctx}/role/updateRole.action";
				}
					  
			});
		}
		//打开分配角色菜单的弹出层
		function openSelectRoleMenu(data){
			 mainIndex = layer.open({
	                type:1,
	                title:"为[ "+data.rolename+" ]分配菜单",
	                area:["500px","500px"],
	                content:$("#selectRoleMenuDiv"),
	                success:function () {
	                    //加载菜单树数据
	                    dtree.render({
	                        elem:"#menuTree",
	                        url: "${ctx}/role/initMenuTreeByRid.action?roleid="+data.roleid,
	                        dataStyle: "layuiStyle",
	                        dataFormat: "list",
	                        response:{message:"msg",statusCode:0},
	                        checkbar: true,
	                        checkbarType: "all"
	                    });
	                },
	                btn:["确认","取消"],
	                yes:function (index, layero) {
	                    //获取树节点复选框选中值
	                    var Nodes = dtree.getCheckbarNodesParam("menuTree");
	                    var params = "";
	                    //循环遍历选中的节点id
	                    $.each(Nodes,function(i,item){
	                    	params += "&ids="+item.nodeId;
	                    	
	                    });
	                  	//rid 角色id, ids要分配的菜单id
                    	$.post("${ctx}/role/saveRoleMenu.action?roleid="+data.roleid,params,function (result) {
                            if(result.success){
                                // tableIns.reload();
                            }
                            layer.msg(result.message);
                        });
                    	layer.close(index);
	                }
	            });
		}
		
		//删除角色
		function deleteRole(data){
			layer.confirm("是否删除角色 ["+data.rolename+" ]?",{"icon":3,"title":"提示"},function (index) {
                $.post("${ctx}/role/deleteById.action",{"roleid":data.roleid},function (result) {
                    if(result.success){
                        //刷新数据表格
                        tableIns.reload();
                    }
                    layer.msg(result.message);
                }, "json");
            });
	 	}
		 	
	});
</script>
</body>
</html>